<template>
    <div class="root">
        <div class="header" v-if="isshowhead">
            <h1 style="`font-size: $font-size-${fontsize};`">{{ commentnum }}条评论<span style="cursor: pointer;"
                    @click="toshowcomment" v-if="!istoshowcomment">展开</span>
                <span v-else @click="toshowcomment" style="cursor: pointer;">收起</span>
            </h1>
        </div>
        <div class="comment-contain" v-if="istoshowcomment">
            <!-- 输入区 -->
            <slot name="defult"></slot>
            <!-- 评论区 -->
            <div class="comment-item" v-for="item in commentlist" :key="item">
                <div class="left-img">
                    <a :href="item.usersiteurl" v-if="item.usersiteurl"></a>
                    <img :src="item.usercover">
                </div>
                <div class="right-info">
                    <div class="comment-info">
                        <div class="coment-name">
                            <span class="name">
                                <i class="iconfont icon-link" v-if="item.usersiteurl"></i>
                                {{ item.username }}
                            </span>
                            <span>{{ item.createdAt }}</span>
                        </div>
                        <div class="dianzan">
                            <i class="iconfont icon-icon" :class="[item.isstrs ? 'active' : '']" @click="setstrs(item)"></i>
                            <span v-if="item.isstrs">{{ parseInt(item.commentstrs) + 1 }}</span>
                            <span v-else>{{ item.commentstrs }}</span>
                            <i class="iconfont icon-liuyan" @click="replycomment(item)"></i>
                        </div>
                    </div>
                    <div class="comment-content">
                        <p>
                            {{ item.content }}
                        </p>
                    </div>
                    <!-- 回复区 -->
                    <div class="comment-item" v-for="x in item.childen">
                        <div class="left-img">
                            <a :href="x.usersiteurl" v-if="x.usersiteurl"></a>
                            <img :src="x.usercover" alt="">
                        </div>
                        <div class="right-info">
                            <div class="comment-info">
                                <div class="coment-name">
                                    <span class="name">{{ x.username }}</span>
                                    <span>{{ x.createdAt }}</span>
                                </div>
                                <div class="dianzan">
                                    <i class="iconfont icon-icon " :class="[x.isstrs ? 'active' : '']"
                                        @click="setstrs(x)"></i>
                                    <span v-if="x.isstrs">{{ parseInt(x.commentstrs) + 1 }}</span>
                                    <span v-else>{{ x.commentstrs }}</span>
                                    <i class="iconfont icon-liuyan" @click="replycomment(item, x)"></i>
                                </div>
                            </div>
                            <div class="comment-content">
                                <p><span v-if="x.fromname">@{{ x.fromname }}</span>
                                    {{ x.content }}
                                </p>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <el-dialog v-model="showreplay" title="回复评论" :width="moveBywidth" align-center>
        <div class="commentbox">
            <div class="login-container">
                <input type="text" placeholder="昵称(必填)" v-model="form.username">
                <input type="text" placeholder="头像地址(选填)" v-model="form.usercover">
                <input type="text" placeholder="网址地址(选填)" v-model="form.usersiteurl">
            </div>
            <div class="atk-textarea-wrap">
                <textarea class="atk-textarea" placeholder="评论一下吧" v-model="form.input" ref="inputbox"></textarea>
                <span @click="toshowemoji"><i class="iconfont icon-icon_xinqing"></i>表情</span>
            </div>
        </div>
        <emoji size="m" :isshow="showemoji" @changeemoji="changeemoji"></emoji>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cansol">取消</el-button>
                <el-button type="primary" @click="reply">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup >
import { getcomment, getcommentunm, replycomments, addstrs, getliuyan } from "@/api/article.js"
import { ref, reactive, onMounted, watch, inject } from 'vue';
import { wrapcomment } from "@/utils/index.js"
import emoji from '@/components/emoji.vue'
import { MobleStore } from "@/stores/mobleOrPc.js"
let mobleOrPc = MobleStore()
let reload = inject("reload")
import { debounce } from '@/utils/index.js';
let debouncefunc = debounce()
let props = defineProps({
    isshowhead: {
        type: Boolean,
        default: true
    },
    istoshowcomment: {
        type: Boolean,
        default: false
    },
    fontsize: {
        type: String,
        default: "l"
    },
    typeobj: {
        type: Object,
        default: () => { }
    },
    pageinfo: {
        type: Object,
        default: () => { }
    }
})
let moveBywidth = ref("40%")
let commentnum = ref(0)
let commentlist = ref([])
let showreplay = ref(false)
let showemoji = ref(false)
let inputbox = ref(null)
let iszhefirst = true
const emit = defineEmits(['changeshowcomment'])
function toshowcomment() {
    if (commentnum.value == 0 && iszhefirst) {
        ElNotification.success({
            title: 'Warning',
            message: '暂无评论',
            offset: 50,
        })
        iszhefirst = false
    }
    emit('changeshowcomment');
}
let form = ref({
    input: "",
    username: "",
    usercover: "",
    usersiteurl: ""
})
let replyinfo = ref({
    fatherid: "",
    fromid: "",
    fromname: "",
})
onMounted(async () => {
    if (mobleOrPc.ismoble) {
        moveBywidth.value = "90%"
    }
    if (props.isshowhead) {
        let res = await getcommentunm({
            type: props.typeobj.type,
            forid: props.typeobj.id
        })
        commentnum.value = res.data.data
    }
    await getcommentlist()
})
async function getcommentlist() {
    let res
    if (props.typeobj.type !== 3) {
        res = await getcomment({
            type: props.typeobj.type,
            forid: props.typeobj.id
        })
    } else {
        res = await getliuyan({
            type: props.typeobj.type,
            forid: props.typeobj.id,
            page: props.pageinfo.page,
            pageSize: props.pageinfo.pageSize
        })
    }
    if (res.data.status == 200) {
        commentlist.value = res.data.data
        if (res.data.data.length > 0) {
            commentlist.value = wrapcomment(commentlist.value)
        }
    } else {
        ElNotification.Warning({
            title: 'Warning',
            message: '暂无评论',
            offset: 50,
        })
    }
}
async function replycomment(father, toitem) {
    replyinfo.value.fatherid = father.id
    if (toitem) {
        replyinfo.value.fromid = toitem.id
        replyinfo.value.fromname = toitem.username
    }
    showreplay.value = true
}
async function setstrs(data) {
    debouncefunc(800, async () => {
        if (!data.isstrs) {
            let res = await addstrs({ id: data.id, type: props.typeobj.type, flag: 1 })
            if (res.data.status == 200) {
                data.isstrs = true;
            }
        } else {
            let res = await addstrs({ id: data.id, type: props.typeobj.type, flag: 2 })
            if (res.data.status == 200) {
                data.isstrs = false;
            }
        }
    })
}
function toshowemoji() {
    showemoji.value = !showemoji.value
}
function cansol() {
    replyinfo.value.fatherid = ""
    replyinfo.value.fromid = ""
    replyinfo.value.fromname = ""
    showreplay.value = false
}
async function reply() {
    if(localStorage.getItem("isLogin")){
        let user = JSON.parse(localStorage.getItem("userinfo"))
        form.value.username = user.username
        form.value.usercover = user.Users_corver
    }
    /* { type, content, forid, username, usersiteurl, usercover, fatherid, fromid, fromname } */
    let res = await replycomments({
        type: props.typeobj.type,
        forid: props.typeobj.id,
        content: form.value.input,
        username: form.value.username,
        usersiteurl: form.value.usersiteurl,
        usercover: form.value.usercover,
        fatherid: replyinfo.value.fatherid,
        fromid: replyinfo.value.fromid,
        fromname: replyinfo.value.fromname
    })
    if (res.data.status == 200) {
        ElNotification.success({
            title: 'Success',
            message: '评论成功',
            offset: 50,
        })
        reload()
    }
    replyinfo.value.fatherid = ""
    replyinfo.value.fromid = ""
    replyinfo.value.fromname = ""
    showreplay.value = false
}
function changeemoji(data) {
    form.value.input += data.pop();
    inputbox.value.focus();
}
if (props.pageinfo?.page) {
    watch(() => props.pageinfo.page, async (newval) => {
        await getcommentlist()
    })
}

watch(() => mobleOrPc.ismoble, (newval) => {
    if (!newval) {
        moveBywidth.value = "40%"
    } else {
        moveBywidth.value = "90%"
    }
})
</script>

<style scoped lang="scss">
.active {
    color: aquamarine;
}

.icon-link {
    font-size: $font-size-s;
}

.root {
    width: 100%;

    .header {
        h1 {
            @include userTheme {
                font-family: getThemeValue("fontfamily");
            }

            box-sizing: border-box;
            padding: 10px;
            padding-bottom: 0px;
            border-bottom: 1px dashed #ccc;
            display: flex;
            justify-content: space-between;
        }
    }

    .comment-contain {
        padding: 10px;
    }

    .comment-item {
        margin-top: 10px;
        overflow: hidden;
        display: flex;
    }

    .left-img {
        height: 30px;
        width: 30px;
        position: relative;

        a {
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            height: 30px;
            width: 30px;
        }

        img {
            height: 30px;
            width: 30px;
        }
    }

    .right-info {
        flex: 1;

        .isshow {
            height: 20px;
            width: 100%;
            position: relative;

            .showbottom {
                height: 100%;

                @include userTheme {
                    background-color: getThemeValue("textareacolor");
                    font-family: getThemeValue("fontfamily");
                }

                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
                display: flex;
                align-items: center;
                padding: 0 5px;
                border-radius: 8px;
                cursor: pointer;

                font-size: $font-size-s;
            }
        }
    }

    .comment-info {
        width: 100%;
        padding: 2px 10px;
        height: 30px;
        display: flex;
        box-sizing: border-box;
        justify-content: space-between;

        .coment-name .name {
            font-size: 18px;

            @include userTheme {

                font-family: getThemeValue("fontfamily");
            }

            margin-right: 5px;
            box-sizing: border-box;
        }

        .coment-name :nth-child(2) {
            font-size: $font-size-s;
            color: #ccc;
        }
    }

    .comment-content {
        margin-top: 5px;
        width: 100%;
        padding: 5px 10px;

        @include userTheme {

            font-family: getThemeValue("fontfamily");
        }

        font-size: $font-size-m;

        p span {
            margin-right: 5px;
            color: rgb(255, 0, 0);
        }
    }
}

.commentbox {
    margin: 10px 0;
    height: 15vh;
    width: 100%;
    border: 1px solid #eceff2;
    border-radius: 10px;

    .login-container {

        height: 35%;
        width: 100%;
        padding: 3px;
        padding-bottom: 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        border-radius: 10px;

        input {
            @include userTheme {

                font-family: getThemeValue("fontfamily");
                color: getThemeValue("fontColor");
            }

            height: 80%;
            width: 30%;
            border: 0px;
            outline: none;
            /* 移除默认边框 */

            font-size: $font-size-m;
        }
    }

    .atk-textarea-wrap {
        position: relative;
        height: 60%;

        span {
            @include userTheme {

                font-family: getThemeValue("fontfamily");
                color: getThemeValue("fontColor");
            }


            position: absolute;
            cursor: pointer;
            left: 15px;
            bottom: 0px;
            font-size: $font-size-m;

        }

        .atk-textarea {
            height: 100%;
            box-sizing: border-box;
            width: 100%;
            display: block;
            overflow: hidden;

            font-size: $font-size-m;

            border: 2px solid transparent;
            border-radius: 3px;
            margin-top: 2px;
            padding: 10px 20px;
            resize: none;
            word-wrap: break-word;
            outline: none;

            border-radius: 10px;

            @include userTheme {
                background-color: getThemeValue("textareacolor");
                font-family: getThemeValue("fontfamily");
                color: getThemeValue("fontColor");
            }

        }

        .sub {
            position: absolute;
            right: 5px;
            bottom: 0px;
            width: 50px;
            height: 30px;

            border: 2px solid #2a2e2e;
            border-radius: 5px;

            font-size: $font-size-m;
            cursor: pointer;
            outline: none;

            @include userTheme {
                color: getThemeValue("fontColor");
                font-family: getThemeValue("fontfamily");
                background-color: getThemeValue("textareacolor");
            }

        }
    }
}

:deep(.el-dialog__body) {
    padding-top: 0px !important;
}

input::placeholder {
    color: #999;
    /* 自定义占位符文本颜色 */
    font-style: italic;
    /* 自定义占位符文本样式 */
    font-size: $font-size-m;

    @include userTheme {

        font-family: getThemeValue("fontfamily");
    }

}

.iconfont {
    margin-left: 5px !important;
}
</style>
